﻿header {
	padding: 25px 0;
}

	header img {
		display: inherit;
		max-width: 750px;
		width: 100%;
		margin: 0 auto;
	}

section {
	background-color: #fff;
	border-bottom: 1px solid #d2d2d2;
	border-top: 1px solid #d2d2d2;
	margin-bottom: 15px;
	padding: 20px 0;
}

.special {
	color: #ff8961;
}

/*芝士基因合成器*/
.main {
	border-top: none;
}

	.main .input-name {
		margin: 0 auto;
		position: relative;
		width: 84.3%;
	}

		.main .input-name img, .main .container img {
			width: 100%;
		}

		.main .input-name input {
			border: 0;
			font-size: 2rem;
			line-height: 1;
			position: absolute;
			height: 26%;
			width: 44%;
			bottom: 22%;
			left: 28%;
			text-align: center;
		}

.main .input-name p {
		font-size: 2rem;
		position: absolute;
		height: 26%;
		width: 44%;
		bottom: 39%;
		left: 28%;
		text-align: center;
	}

	.main .container {
		margin-top: 20px;
		position: relative;
	}

		.main .container img {
			position: relative;
		}

	.main .finger {
		background: url('../img/i_finger.png') no-repeat top center;
		background-size: 100% auto;
		bottom: 14%;
		position: absolute;
		width: 27%;
		z-index: 10;
	}

		.main .finger.active {
			background-position: bottom center;
		}

		.main .finger.left {
			left: 10%;
		}

		.main .finger.right {
			right: 10%;
			-moz-transform: scaleX(-1);
			-ms-transform: scaleX(-1);
			-o-transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			transform: scaleX(-1);
		}

	.main .container .fingers {
		position: absolute;
		bottom: 16%;
		max-width: 190px;
		width: 20%;
		z-index: 5;
		opacity: 0;
		left: 0;
	}

		.main .container .fingers.left {
			left: 12%;
		}

			.main .container .fingers.left img {
				-moz-transform: scaleX(-1);
				-ms-transform: scaleX(-1);
				-o-transform: scaleX(-1);
				-webkit-transform: scaleX(-1);
				transform: scaleX(-1);
			}

		.main .container .fingers.right {
			left: 68%;
		}

		.main .container .fingers.active.left {
			opacity: 1;
			left: 43%;
			bottom: 37%;
			-moz-transition: opacity 1s,left 1s,bottom 1s;
			-o-transition: opacity 1s,left 1s,bottom 1s;
			-webkit-transition: opacity 1s,left 1s,bottom 1s;
			transition: opacity 1s,left 1s,bottom 1s;
		}

		.main .container .fingers.active.right {
			opacity: 1;
			left: 37%;
			bottom: 37%;
			-moz-transition: opacity 1s,left 1s,bottom 1s;
			-o-transition: opacity 1s,left 1s,bottom 1s;
			-webkit-transition: opacity 1s,left 1s,bottom 1s;
			transition: opacity 1s,left 1s,bottom 1s;
		}

.main .notice {
		color:#232323;
		font-size:1.4rem;
		font-weight:bold;
		position: absolute;
		top: 43%;
		width: 100%;
		text-align: center;
		z-index: 10;
	}
	
	.main .synthesizer {
		z-index: 2;
	}
	
	.main .synthesizer.touched {
			-moz-animation: shake1 0.2s;
			-o-animation: shake1 0.2s;
			-webkit-animation: shake1 0.2s;
			animation: shake1 0.2s;
		}
	
	
	.main .finger-bg {
		margin-top: -6%;
		z-index: 1;
	}

	.main .energy {
		background-color: #f8f8f8;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
		color: #232323;
		font-size: 2rem;
		font-weight: bold;
		margin: 15px auto 0 auto;
		padding: 7px 10px;
		width: 50%;
		text-align: center;
	}

		.main .energy img {
			vertical-align: middle;
			width: 70%;
			margin-right: 20px;
		}

		.main .energy label {
			vertical-align: middle;
		}

/*活动相关说明*/
.description {
	padding: 15px 4%;
	text-align: center;
}


	.description p {
		font-size: 1.7rem;
		line-height: 1.5;
		text-align: left;
	}

	.description .u-bgc {
		background-color: #f8f8f8;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}

	.description .intro span {
		display: inline-block;
		margin-bottom: -10px;
		padding: 15px 8% 10px 8%;
		width: 30%;
	}

		.description .intro span img {
			max-width: 185px;
			width: 100%;
		}

	.description .intro p {
		padding: 25px 7%;
	}

	.description .rules {
		padding: 25px 7% 30px 7%;
	}

		.description .rules p {
			margin-top: 20px;
		}

		.description .rules h2 {
			margin: 0 auto;
			width: 35%;
		}

			.description .rules h2 img {
				max-width: 187px;
				width: 100%;
			}

	.description .space img {
		float: left;
		margin-left: 10%;
		width: 6%;
	}

	.description .link {
		margin: 18px auto 5px auto;
		max-width: 265px;
		width: 35.3%;
	}


/*合作伙伴*/
.partner {
	text-align: center;
}

	.partner h2 {
		margin-bottom: 15px;
	}

		.partner h2 img {
			max-width: 188px;
			width: 28%;
		}

	.partner .list img {
		height: 90px;
		margin-right: 10%;
	}

		.partner .list img:last-child {
			margin-right: 0;
		}
/*倒计时*/
.showTimeout .popup-layout {
	text-align: center;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
}

	.showTimeout .popup-layout p {
		color: #fff166;
		font-size: 3.7rem;
		line-height: 1.3;
		margin-top: 55%;
		margin-bottom: 20px;
	}


/*过渡效果*/
.container.process .synthesizer, .container.process .fingers {
	-moz-animation: shake 2s 1.3s ease-in;
	-o-animation: shake 2s 1.3s ease-in;
	-webkit-animation: shake 2s 1.3s ease-in;
	animation: shake 2s 1.3s ease-in;
}

@keyframes shake {
	0% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	2.5% {
		-ms-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}

	5% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	7.5% {
		-ms-transform: rotate(10deg);
		-o-transform: rotate(10deg);
		transform: rotate(10deg);
	}

	10% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	12.5% {
		-ms-transform: rotate(-15deg);
		-o-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}

	15% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	17.5% {
		-ms-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	20% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	22.5% {
		-ms-transform: rotate(-20deg);
		-o-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}

	25% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	27.5% {
		-ms-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		transform: rotate(20deg);
	}

	30% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	32.5% {
		-ms-transform: rotate(-25deg);
		-o-transform: rotate(-25deg);
		transform: rotate(-25deg);
	}

	35% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	37.5% {
		-ms-transform: rotate(25deg);
		-o-transform: rotate(25deg);
		transform: rotate(25deg);
	}

	40% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	42.5% {
		-ms-transform: rotate(-25deg);
		-o-transform: rotate(-25deg);
		transform: rotate(-25deg);
	}

	45% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	47.5% {
		-ms-transform: rotate(25deg);
		-o-transform: rotate(25deg);
		transform: rotate(25deg);
	}

	50% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	52.5% {
		-ms-transform: rotate(-25deg);
		-o-transform: rotate(-25deg);
		transform: rotate(-25deg);
	}

	55% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	57.5% {
		-ms-transform: rotate(25deg);
		-o-transform: rotate(25deg);
		transform: rotate(25deg);
	}

	60% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	62.5% {
		-ms-transform: rotate(-25deg);
		-o-transform: rotate(-25deg);
		transform: rotate(-25deg);
	}

	65% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	67.5% {
		-ms-transform: rotate(25deg);
		-o-transform: rotate(25deg);
		transform: rotate(25deg);
	}

	70% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	72.5% {
		-ms-transform: rotate(-20deg);
		-o-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}

	75% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	77.5% {
		-ms-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		transform: rotate(20deg);
	}

	80% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	82.5% {
		-ms-transform: rotate(-15deg);
		-o-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}

	85% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	87.5% {
		-ms-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	90% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	92.5% {
		-ms-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	95% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

	97.5% {
		-ms-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		transform: rotate(5deg);
	}

	100% {
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}
}

@-moz-keyframes shake {
	0% {
		-moz-transform: rotate(0);
	}

	2.5% {
		-moz-transform: rotate(-10deg);
	}

	5% {
		-moz-transform: rotate(0);
	}

	7.5% {
		-moz-transform: rotate(10deg);
	}

	10% {
		-moz-transform: rotate(0);
	}

	12.5% {
		-moz-transform: rotate(-15deg);
	}

	15% {
		-moz-transform: rotate(0);
	}

	17.5% {
		-moz-transform: rotate(15deg);
	}

	20% {
		-moz-transform: rotate(0);
	}

	22.5% {
		-moz-transform: rotate(-20deg);
	}

	25% {
		-moz-transform: rotate(0);
	}

	27.5% {
		-moz-transform: rotate(20deg);
	}

	30% {
		-moz-transform: rotate(0);
	}

	32.5% {
		-moz-transform: rotate(-25deg);
	}

	35% {
		-moz-transform: rotate(0);
	}

	37.5% {
		-moz-transform: rotate(25deg);
	}

	40% {
		-moz-transform: rotate(0);
	}

	42.5% {
		-moz-transform: rotate(-25deg);
	}

	45% {
		-moz-transform: rotate(0);
	}

	47.5% {
		-moz-transform: rotate(25deg);
	}

	50% {
		-moz-transform: rotate(0);
	}

	52.5% {
		-moz-transform: rotate(-25deg);
	}

	55% {
		-moz-transform: rotate(0);
	}

	57.5% {
		-moz-transform: rotate(25deg);
	}

	60% {
		-moz-transform: rotate(0);
	}

	62.5% {
		-moz-transform: rotate(-25deg);
	}

	65% {
		-moz-transform: rotate(0);
	}

	67.5% {
		-moz-transform: rotate(25deg);
	}

	70% {
		-moz-transform: rotate(0);
	}

	72.5% {
		-moz-transform: rotate(-20deg);
	}

	75% {
		-moz-transform: rotate(0);
	}

	77.5% {
		-moz-transform: rotate(20deg);
	}

	80% {
		-moz-transform: rotate(0);
	}

	82.5% {
		-moz-transform: rotate(-15deg);
	}

	85% {
		-moz-transform: rotate(0);
	}

	87.5% {
		-moz-transform: rotate(15deg);
	}

	90% {
		-moz-transform: rotate(0);
	}

	92.5% {
		-moz-transform: rotate(-5deg);
	}

	95% {
		-moz-transform: rotate(0);
	}

	97.5% {
		-moz-transform: rotate(15deg);
	}

	100% {
		-moz-transform: rotate(0);
	}
}

@-webkit-keyframes shake {
	0% {
		-webkit-transform: rotate(0);
	}

	2.5% {
		-webkit-transform: rotate(-10deg);
	}

	5% {
		-webkit-transform: rotate(0);
	}

	7.5% {
		-webkit-transform: rotate(10deg);
	}

	10% {
		-webkit-transform: rotate(0);
	}

	12.5% {
		-webkit-transform: rotate(-15deg);
	}

	15% {
		-webkit-transform: rotate(0);
	}

	17.5% {
		-webkit-transform: rotate(15deg);
	}

	20% {
		-webkit-transform: rotate(0);
	}

	22.5% {
		-webkit-transform: rotate(-20deg);
	}

	25% {
		-webkit-transform: rotate(0);
	}

	27.5% {
		-webkit-transform: rotate(20deg);
	}

	30% {
		-webkit-transform: rotate(0);
	}

	32.5% {
		-webkit-transform: rotate(-25deg);
	}

	35% {
		-webkit-transform: rotate(0);
	}

	37.5% {
		-webkit-transform: rotate(25deg);
	}

	40% {
		-webkit-transform: rotate(0);
	}

	42.5% {
		-webkit-transform: rotate(-25deg);
	}

	45% {
		-webkit-transform: rotate(0);
	}

	47.5% {
		-webkit-transform: rotate(25deg);
	}

	50% {
		-webkit-transform: rotate(0);
	}

	52.5% {
		-webkit-transform: rotate(-25deg);
	}

	55% {
		-webkit-transform: rotate(0);
	}

	57.5% {
		-webkit-transform: rotate(25deg);
	}

	60% {
		-webkit-transform: rotate(0);
	}

	62.5% {
		-webkit-transform: rotate(-25deg);
	}

	65% {
		-webkit-transform: rotate(0);
	}

	67.5% {
		-webkit-transform: rotate(25deg);
	}

	70% {
		-webkit-transform: rotate(0);
	}

	72.5% {
		-webkit-transform: rotate(-20deg);
	}

	75% {
		-webkit-transform: rotate(0);
	}

	77.5% {
		-webkit-transform: rotate(20deg);
	}

	80% {
		-webkit-transform: rotate(0);
	}

	82.5% {
		-webkit-transform: rotate(-15deg);
	}

	85% {
		-webkit-transform: rotate(0);
	}

	87.5% {
		-webkit-transform: rotate(15deg);
	}

	90% {
		-webkit-transform: rotate(0);
	}

	92.5% {
		-webkit-transform: rotate(-5deg);
	}

	95% {
		-webkit-transform: rotate(0);
	}

	97.5% {
		-webkit-transform: rotate(15deg);
	}

	100% {
		-webkit-transform: rotate(0);
	}
}
@keyframes shake1 {
	0%{
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}
	25% {
		-ms-transform: rotate(-5deg); 
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	50%{
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}
	
	75% {
		-ms-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	100%{
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}

}

@-moz-keyframes shake1 {
	0%{
		-moz-transform: rotate(0);
	}
	25% {
		-moz-transform: rotate(-5deg);
	}
	50%{
		
		-moz-transform: rotate(0);
	}
	
	75% {
		-moz-transform: rotate(5deg);
	}
	100%{
		
		-moz-transform: rotate(0);
	}
}

@-webkit-keyframes shake1 {
	0%{
		-webkit-transform: rotate(0);
	}
	25% {
		-webkit-transform: rotate(-5deg);
	}
	50%{
		-webkit-transform: rotate(0);
	}
	
	75% {
		-webkit-transform: rotate(5deg);
	}
	100%{
		-webkit-transform: rotate(0);
	}
}
